<template>
    <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="修改密码" @close="cancelHandler">
        <JsForm ref="formRef" :FormParams="formParams" :Rule="formRules" :PropsConfig="formProps" />
        <div class="button-row">
            <el-button type="primary" @click="handleSubmitForm">提 交</el-button>
            <el-button @click="handleCancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref, toRefs, getCurrentInstance } from 'vue'
import JsForm from '@/components/Form/index.tsx'
import { formRules } from './config.js'
import { ChangePwd } from '@/api/system/user'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['cancelHandler'])

const formRef = ref()
const data = reactive({
    formParams: {
        oldPassword: null,
        password: null,
        confirmPassword: null,
    },
    formProps: {
        'label-width': '110px',
    },
})

const { formParams, formProps } = toRefs(data)

const dialogVisible = ref(false)

const cancelHandler = () => {
    resetForm()
    dialogVisible.value = false
}

const handleSubmitForm = () => {
    formRef.value.FormRef.validate((valid) => {
        if (!valid) return proxy.$modal.msgWarning('请填写完整')
        if (formParams.value.password !== formParams.value.confirmPassword) {
            return proxy.$modal.msgWarning('请确认新密码是否相同')
        }
        // 修改密码提交
        ChangePwd(formParams.value).then((res) => {
            cancelHandler()
            emit('cancelHandler')
        })
    })
}

const handleCancel = () => {}

const resetForm = () => {
    formParams.value = {
        oldPassword: null,
        password: null,
        confirmPassword: null,
    }
}

const openDialog = (rowData = {}) => {
    dialogVisible.value = true

    console.log(dialogVisible.value, 'dialogVisible.value')
}

defineExpose({
    openDialog,
})
</script>

<style lang="scss" scoped>
.button-row {
    text-align: right;
    margin-top: 26px;
}
</style>
